<!DOCTYPE html>
<html ng-app="app">

<head>
    <meta charset="utf-8">
    <title>RUN</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="__STATIC__/index/css/mui.min.css">
    <link rel="stylesheet" href="__STATIC__/index/css/commen.css" />
    <style type="text/css">
        ul,
        button {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .mui-input-row select,
        input {
            background-color: #2c313b !important;
            color: #fff;
            height: 37px;
            padding: 0 15px;
            font-size: 16px;
            border: none !important;
            appearance: none;
            -moz-appearance: none;
            -webkit-appearance: none;
        }

        .whiteColor {
            color: #fff;
        }

        .redColor {
            color: #ee3b3b;
        }

        .greenColor {
            color: #1eae58;
        }

        .runBox {
            margin: 20px 15px;
        }

        .runBox p {
            margin-bottom: 20px;
        }

        .mui-input-row {
            position: relative;
            margin-bottom: 10px;
        }

        .mui-icon-arrowdown {
            color: #fff;
            position: absolute;
            top: 8px;
            right: 15px;
        }

        ul li {
            margin-bottom: 20px;
            color: #fff;
        }

        input::-webkit-input-placeholder,
        textarea::-webkit-input-placeholder {
            color: #fff;
        }

        input:-moz-placeholder,
        textarea:-moz-placeholder {
            color: #fff;
        }

        input::-moz-placeholder,
        textarea::-moz-placeholder {
            color: #fff;
        }

        input:-ms-input-placeholder,
        textarea:-ms-input-placeholder {
            color: #fff;
        }

        .hyyzmLi {
            position: relative;
        }

        .hyyzmLi input {
            height: 44px;
        }

        .hqyzmBox {
            position: absolute;
            right: 0;
            top: 0;
            display: inline-block;
            height: 44px;
            line-height: 44px;
            width: 120px;
            text-align: center;
            background-color: green;
            outline: none;
            border: none;
            color: #fff;
        }

        .rollOutBtn {
            height: 50px;
            background-color: #e55600;
            color: #fff;
            border-radius: 5px;
            text-align: center;
            line-height: 50px;
            font-size: 16px;
        }
    </style>
</head>

<body>
    <header class="mui-bar mui-bar-nav">
        <a class="mui-icon mui-icon-left-nav mui-pull-left" onclick="javascript :history.back(-1);"></a>
        <h4 class="mui-title">RUN</h4>
    </header>
    <div id="run" class="mui-content" >
        <div class="runBox">
            <p class="whiteColor"> 可用余额：
                <span class="redColor useMoney">{$user.run}</span>
            </p>
            <p class="whiteColor">绑定手机号：+86 {$phone}</p>
            <div class="mui-input-row">
                <select name="select" id="mySelect" >
                    <option value="0">--选择钱包地址--</option>
                    <option value="tianjia" >新增钱包地址</option>
                </select>
                <!-- <span class="mui-icon mui-icon-arrowdown mui-pull-right"></span> -->
            </div>
            <ul>
                <li>
                    <input type="number" id="rollOut_num" placeholder="转出数量(50~100000)" />
                </li>
                <li>
                    <input type="number" id="trade_password" maxlength="6" placeholder="交易密码" oninput="if(value.length>6) value=value.slice(0,6)"
                    />
                </li>
                <li class="hyyzmLi">
                    <input type="text" id="trade_yzm" placeholder="获取验证码" value="" />
                    <button class="hqyzmBox">获取验证码</button>
                </li>
                <li>
                    <p class="rollOutBtn">
                        确认转出
                    </p>
                </li>
            </ul>
        </div>
    </div>
    <script src="__STATIC__/index/js/mui.min.js"></script>
    <script src="__STATIC__/index/js/jquery.min.js"></script>
    <script language="javascript" type="text/javascript">
        $(document).ready(function () {
            $("select option[value=0]").attr("selected", "selected");
            $('#mySelect').change(function () {
                var status = $(this).val();
                if(status == 'tianjia'){
                    window.location.href = "{:url('run/runlist')}";
                }
            })
        })
    </script>
    <script type="text/javascript">
        mui.init();
        //	发送短信
        mui('.hyyzmLi').on('tap', '.hqyzmBox', function () {
            //调用
            sendTime();
        });
        //倒计时函数
        function sendTime() {
            $('.hqyzmBox').text("59s后重试").attr('disabled', 'disabled');
            var code_second = 58;
            var timerHandler;
            timerHandler = setInterval(function () {
                if (code_second <= 0) {
                    window.clearInterval(timerHandler); //当执行的时间59s,结束时，取消定时器    
                    code_second = 58;
                    $('.hqyzmBox').text('发送验证码').removeAttr('disabled');
                } else {
                    $('.hqyzmBox').text(code_second + "s后重试").attr('disabled', 'disabled');
                    code_second--;
                }
            }, 1000)
        }
    </script>
</body>

</html>